<template>
    <div class="orderBuy">
        <div class="adress">
            <div class="back" @click="back">
                <van-icon name="arrow-left" />
            </div>
            <van-form @submit="onSubmit" ref="formData">
                <div class="form">
                    <van-cell-group inset>
                        <h3 style="padding: 15px 0">收货地址</h3>
                        <van-field
                            v-model="ordermain.receiver"
                            name="姓名"
                            required
                            placeholder="姓名"
                            left-icon="friends"
                            :rules="[{ required: true, message: '请填写姓名' }]"
                        />
                        <van-field
                            v-model="ordermain.receivertelno"
                            name="手机号码"
                            required
                            placeholder="手机号码"
                            left-icon="phone"
                            :rules="[
                                { required: true, message: '请填写手机号码' },
                            ]"
                        />
                        <van-field
                            v-model="ordermain.receiveraddress"
                            name="详细地址"
                            required
                            placeholder="详细地址(详细到镇、街道、门牌号)"
                            left-icon="label"
                            :rules="[
                                { required: true, message: '请填写详细地址' },
                            ]"
                        />
                    </van-cell-group>

                    <!-- <div style="margin: 16px">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div> -->
                </div>
                <div class="order-msg">
                    <van-cell-group inset>
                        <h3 style="padding: 15px 0">订单信息</h3>
                        <div
                            v-for="(item, i) of list"
                            :key="i"
                            style="margin-top: 8px"
                        >
                            <van-card
                                :num="item.num"
                                :title="item.name"
                                :thumb="item.img"
                            >
                                <template #desc>
                                    <van-button
                                        size="mini"
                                        type="warning"
                                        plain
                                        style="margin-top: 4px"
                                        >包邮</van-button
                                    >
                                </template>
                                <template #price>
                                    <span class="price"
                                        >￥{{ item.price }}</span
                                    >
                                </template>
                            </van-card>
                        </div>
                        <van-divider />
                        <p class="fly">邮费<span>￥0</span></p>
                    </van-cell-group>
                </div>
                <div class="invoice">
                    <van-cell-group inset>
                        <h3 style="padding: 15px 0">
                            发票<van-checkbox
                                style="color: #909399"
                                icon-size="16px"
                                label-position="left"
                                v-model="isinvoice"
                                >是否开具发票</van-checkbox
                            >
                        </h3>
                        <div v-if="invoiceShow">
                            <van-field
                                v-model="result"
                                is-link
                                readonly
                                name="picker"
                                label="发票类型"
                                placeholder="点击选择发票类型"
                                @click="Picker('invoiceType')"
                            />
                            <van-field
                                v-if="resultTypeShow"
                                v-model="resultType"
                                is-link
                                readonly
                                name="picker"
                                label="抬头类型"
                                placeholder="点击选择发票抬头类型"
                                @click="Picker('headerType')"
                            />
                            <div v-if="per">
                                <van-field
                                    v-model="invoice.invoiceHead"
                                    label="发票抬头"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请填写发票抬头',
                                        },
                                    ]"
                                    placeholder="请输入发票抬头"
                                    style="padding: 10px 0"
                                />
                            </div>
                            <div v-if="company">
                                <van-field
                                    v-model="invoice.invoiceHead"
                                    label="发票抬头"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请填写发票抬头',
                                        },
                                    ]"
                                    placeholder="请输入发票抬头"
                                    style="padding: 10px 0"
                                />
                                <van-field
                                    v-model="invoice.paragraph"
                                    label="单位税号"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请填写单位税号',
                                        },
                                    ]"
                                    placeholder="请输入单位税号"
                                    style="padding: 10px 0"
                                />
                                <van-field
                                    v-model="invoice.adress"
                                    label="注册地址"
                                    :rules="rules.adress"
                                    :placeholder="invoicePla"
                                    style="padding: 10px 0"
                                />
                                <van-field
                                    v-model="invoice.phone"
                                    label="注册电话"
                                    :rules="rules.phone"
                                    :placeholder="invoicePla"
                                    style="padding: 10px 0"
                                />
                                <van-field
                                    v-model="invoice.bank"
                                    label="开户银行"
                                    :rules="rules.bank"
                                    :placeholder="invoicePla"
                                    style="padding: 10px 0"
                                />
                                <van-field
                                    v-model="invoice.bankCode"
                                    label="银行账号"
                                    :rules="rules.bankCode"
                                    :placeholder="invoicePla"
                                    style="padding: 10px 0"
                                />
                            </div>
                        </div>
                    </van-cell-group>
                </div>
            </van-form>
            <div style="height: 60px"></div>
            <div class="up">
                <van-submit-bar
                    :price="sumPrice"
                    button-text="确认"
                    @submit="onok"
                    button-color="#7232DD"
                >
                    <p>共选择 {{ sumNumber }} 件</p>
                </van-submit-bar>
            </div>
        </div>
    </div>
    <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
    </van-popup>
</template>
<script>
import { Toast } from "vant";
export default {
    data() {
        return {
            isinvoice: false,
            ordermain: {
                receiver: "姓名",
                receivertelno: "18782611091",
                receiveraddress: "地址",
            },
            showPicker: false,
            result: "",
            resultType: "",
            columns: [],
            sumNumber: 1,
            sumPrice: 100000,
            list: [],
            invoiceShow: false,
            resultTypeShow: false,
            per: false,
            company: false,
            setShow: "",
            invoice: {
                invoiceHead: "",
                paragraph: "",
                adress: "",
                phone: "",
                bank: "",
                bankCode: "",
            },
            rules: {
                adress: [{ required: false, message: "请填写地址" }],
                phone: [{ required: false, message: "请填写注册电话" }],
                bank: [{ required: false, message: "请填写注册银行" }],
                bankCode: [{ required: false, message: "请填写注册银行账户" }],
            },
            invoiceReq: false,
            invoicePla: "选填",
        };
    },
    watch: {
        isinvoice() {
            if (this.isinvoice) {
                this.invoiceShow = true;
            } else {
                this.invoiceShow = false;
            }
        },
        resultType(val) {
            if (val == "个人") {
                this.per = true;
                this.company = false;
            } else {
                this.per = false;
                this.company = true;
            }
        },
        result(val) {
            if (val == "增值税普通发票") {
                this.rules.adress[0].required = false;
                this.rules.phone[0].required = false;
                this.rules.bank[0].required = false;
                this.rules.bankCode[0].required = false;
                this.invoicePla = "选填";
                this.company = false;
                this.resultTypeShow = true;
                this.resultType = "";
            } else {
                this.rules.adress[0].required = true;
                this.rules.phone[0].required = true;
                this.rules.bank[0].required = true;
                this.rules.bankCode[0].required = true;
                this.invoicePla = "必填";
                this.company = true;
                this.resultTypeShow = false;
            }
        },
    },
    created() {
        var data = JSON.parse(this.$route.query.row);
        
        this.sumNumber = data.sumNumber;
        this.sumPrice = data.sumPrice;
        this.list = data.list;
        for(let item of this.list){
            item.productnum =  item.num 
        }
    },
    methods: {
        onSubmit() {},
        validator(val) {
            console.log(val);
        },
        onConfirm(value) {
            if (this.setShow == "1") {
                this.result = value;
            } else {
                this.resultType = value;
            }
            this.showPicker = false;
        },
        onok() {
            var ret = this.req();
            if (ret) {
                this.$refs.formData.validate().then(async () => {
                    // Toast.loading({
                    //     duration: 0,
                    //     message: "加载中...",
                    //     forbidClick: true,
                    // });

                    // setTimeout(function () {
                    //     Toast.clear();
                    //     Toast.success("订单付款成功");
                    // }, 2000);

                    let invoiceData = this.invoice;
                    invoiceData.receipttype = this.result
                    invoiceData.receiptitletype = this.resultType
                    invoiceData.receiptitle = this.invoice.invoiceHead
                    invoiceData.taxpaynumber = this.invoice.paragraph
                    invoiceData.account = this.invoice.bankCode
                    invoiceData.receipbanknamettype = this.invoice.bank
                    invoiceData.bankaddress = this.invoice.adress
                    invoiceData.banktelno = this.invoice.phone
                    let data = {
                        ordermain:this.ordermain,
                        receipt:invoiceData,
                        orderitems:this.list,
                    }
                    console.log(data)
                    var res = await this.$API.order.SaveOrder.post(data)
                    console.log(res)
                    if(res.type ==1){

                    }else{
                        Toast.fail(res.message);
                    }
                    
                })
                .catch(() => {
                    return false;
                });
            }
            // this.$router.replace({
            //     path: "/main",
            // });
        },
        back() {
            this.$router.replace({
                path: "/main",
            });
        },
        Picker(val) {
            if (val == "invoiceType") {
                this.columns = ["增值税普通发票", "增值税专用发票"];
                this.setShow = "1";
            } else {
                this.columns = ["个人", "单位"];
                this.setShow = "2";
            }
            this.showPicker = true;
        },
        req() {
            let back = true;
            if (this.isinvoice) {
                if (this.result == "") {
                    Toast.fail("请选择发票类型");
                    back = false;
                } else {
                    if (this.result == "增值税普通发票") {
                        if (this.resultType == "") {
                            Toast.fail("请选择发票抬头类型");
                            back = false;
                        }
                    }
                }
            }
            return back;
        },
    },
};
</script>
<style lang="scss" scoped>
.price {
    color: #ee0a24;
    font-size: 16px;
    font-weight: bold;
}
.fly {
    margin-bottom: 20px;
}
.fly span {
    float: right;
}
.van-checkbox {
    justify-content: flex-end;
    align-content: stretch;
    margin-top: -20px;
}
.van-cell--clickable {
    padding: 10px 0;
}
.van-submit-bar {
    border-top: solid 1px #ebeef5;
}
</style>